
<template>
    <div class="product-list">
      <s-Header name="我的订单" @callback="close" >
        <div class="header-search">
          <!-- 使用van-search组件 -->
          <van-search v-model="state.keyword" placeholder="请输入搜索关键词" />
        </div>
        <template #rightIcon>
          <van-button style="margin-top: 6px;" type="primary" size="small" @click="getSearch">搜索</van-button>
        </template>
      </s-Header>
      <van-tabs :active="state.status" @click-tab="onChangeTab" type="card">
        <van-tab title="推荐" name="0"></van-tab>
        <van-tab title="新品" name="new"></van-tab>
        <van-tab title="价格" name="price"></van-tab>
      </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="state.refreshing" :head-height="80" @refresh="onRefresh">
        <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
        <template #pulling="props">
          <img
            class="doge"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
            :style="{ transform: `scale(${props.distance / 80})` }"
          />
        </template>
        <!-- 释放提示 -->
        <template #loosing>
          <img
            class="doge"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
          />
        </template>
        <!-- 加载提示 -->
        <template #loading>
          <img
            class="doge"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
          />
        </template>

        <van-list
          :loading="state.loading"
          :finished="state.finished"
          finished-text="没有更多了"
          @load="onLoad"
        > 
          <template v-if="state.productList.length">
            <div class="product-item" v-for="(item, index) in state.productList" :key="index" @click="productDetail(item)">
              <img alt="" :src="$filters.prefix(item.goodsCoverImg)" />
              <div class="product-info">
                <p class="name">{{item.goodsName}}</p>
                <p class="subtitle">{{item.goodsIntro}}</p>
                <span class="price">￥ {{item.sellingPrice}}</span>
              </div>
            </div>
          </template>
          <img class="empty" v-else src="https://s.yezgea02.com/1604041313083/kesrtd.png" alt="搜索">
        </van-list>
      </van-pull-refresh>
    </div>
    </div>
  </template>
  <script setup>
    import { useRoute, useRouter } from 'vue-router'
    import { reactive, ref, isRef, isReactive,nextTick, onUnmounted, onMounted  } from 'vue'
    import { showSuccessToast, showFailToast, showLoadingToast, closeToast, closeDialog } from 'vant'
    import { getDetail } from '@/service/good'
    import sHeader from '@/components/SimpleHeader.vue'
    import { search } from '@/service/good'

    const router = useRouter();
    const route = useRoute();
    console.log('router...',router,route)

    const state = reactive({
      keyword: route.query.keyword || '', //商品id
      searchBtn: false, // 展示搜索按钮
      seclectActive: false,
      refreshing: false, // van-pull-refresh 是否在下拉刷新
      list: [],
      loading: false, // 列表是否子啊loading
      finished: false,  // 列表是否加载完毕
      productList: [], // 数据列表
      totalPage: 0, // 总页数
      page: 1, // 当前页
      orderBy: ''
    })
    
    onMounted(()=>{
      // const { id } = route.params
      // const { data } = await getDetail(id)
      // data.goodsCarouselList = data.goodsCarouselList.map(i => prefix(i))
      // state.detail = data
      // cart.updateCart()
    })

    const productDetail = (item) => {
      router.push({ path: `/product/${item.goodsId}` })
    }

    const init = async () => {
      // return
      const { categoryId } = route.query
      if (!categoryId && !state.keyword) {
        state.finished = true
        state.loading = false;
        return
      }
      const { data, data: { list } } = await search({ pageNumber: state.page, goodsCategoryId: categoryId, keyword: state.keyword, orderBy: state.orderBy })
      console.log('datalist...',data,list)
      state.productList = state.productList.concat(list)
      state.totalPage = data.totalPage
      state.loading = false;
      if (state.page >= data.totalPage) state.finished = true
    }
    
    // van-list 上拉加载更多页
    const onLoad = () => {
      if (!state.refreshing && state.page < state.totalPage) {
        state.page = state.page + 1
      }
      if (state.refreshing) {
        state.productList = [];
        state.refreshing = false;
      }
      init()
    }

    const getSearch = () => {
      onRefresh()
    }

    // van-pull-refresh 上拉初始化 van-list及分页相关状态
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.page = 1
      onLoad()
    }

    const onChangeTab = ({ name }) => {
      console.log('name', name)
      state.orderBy = name
      onRefresh()
    }
    
    const close = () => {
      closeDialog()
    }
    const goBack = () => {
      router.go(-1)
    }
    const goTo = (r, query) => {
      router.push({ path: r, query: query || {} })
    }
  </script>
    
  
  <style lang="less" >
    @import '../common/style/mixin';
    .product-list{
      .simple-header{
        .header-search{
          flex-grow: 1;
          display: flex;
          justify-content: center;
          .van-search{
            padding: 0px 16px;
            width: 100%;
            .van-search__content{
              border-radius: 20px;
            }
          }
        }
      }
      .van-tabs{
        width: 100%;
        position: fixed;
        top: 44px;
        z-index: 1;
        margin-top:10px;
      }
      .content{
        height:calc(100vh - 88px);
        margin-top: 44px;
        overflow-y: scroll;
        
        .van-pull-refresh{
          // background: #ddd7d7;
          height:100%;
          .van-pull-refresh__head{
            .doge{
              height: 64px;
              margin:6px auto;
              border-radius: 6px;
            }
          }
          .van-list{
            // background: red;
            .product-item{
              &:first-child{
                border-top: 1px solid #ccc;
                margin-top: 0px;
              }
              display: flex;
              // border-bottom: 1px solid #ccc;
              box-shadow: 1px 1px 4px 0px #ccc;
              border-radius: 6px;
              margin:10px;
              img{
                width: 140px;
                height: 120px;
                padding: 0 10px;
                .boxSizing();
              }
              .product-info{
                font-size: 14px;
                color:#ccc;
                padding: 10px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                .name{
                  width: 100%;
                  // max-height: 1.06667rem;
                  // line-height: 0.53333rem;
                  // font-size: 0.4rem;
                  color: #333;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .subtitle{
                  width: 100%;
                  color: #999;
                  overflow: hidden;
                  flex:1;
                }
                .price{
                  color: #1baeae;
                  font-size: 16px;
                }
              }
            }
            .empty{
              display: block;
              width: 200px;
              margin: 40px auto;
            }
            .order_grounp{
              margin: 10px;
              border-radius: 4px;
              box-shadow: 1px 1px 4px 0px #ccc;
              overflow: hidden;
              .grounp_info{
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                align-items: center;
                padding: 10px 10px 0px 10px ;
                color: #666;
                .pay_type{
                  color:blueviolet;
                }
              }
            }
          }
        }
      }
    } 
  </style>
  <style lang="less" scoped>
     
  </style>